import React from 'react';
import { Button } from 'antd';
import DataSet from '@antv/data-set';
import {Chart, Geom, Axis, Tooltip, Legend, Coord, Guide, Label} from 'bizcharts';
import styles from './index.less';

// 定义度量
const cols = {
    percent: {
        formatter: val => {
            val = (val * 100) + '%';
            return val;
        }
    }
}
const {Html,Text} = Guide;

export default ({ data}) => {

    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.source(data).transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
    });
    return (
        <Chart height={100} data={dv} scale={cols} padding={[5]} forceFit>
            <Coord type={'theta'} radius={1} />
            <Axis name="percent"/>
            <Legend position='right' offsetY={-100 / 2 + 60} offsetX={-30}/>
            <Tooltip
                showTitle={false}
                itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
            />
            <Geom
                type="intervalStack"
                position="percent"
                color='item'
                tooltip={['item*percent', (item, percent) => {
                    percent = percent * 100 + '%';
                    return {
                        name: item,
                        value: percent
                    };
                }]}
                style={{lineWidth: 0, stroke: '#fff'}}
                select={false}
            >
                <Label content='percent' offset={-10}
                       textStyle={{
                           rotate: 0,
                           textAlign: 'center',
                           shadowBlur: 5,
                           shadowColor: '#000',
                       }}/>
            </Geom>
        </Chart>
    );
};
